/*
 * @Description: 
 * @Version: 1.0
 * @Autor: ziwei
 * @Date: 2021-05-27 14:53:27
 * @LastEditors: ziwei
 * @LastEditTime: 2021-06-10 10:42:20
 */
import Dep from "./dep";
import { queueWatcher } from "./sceduler";

let id = 0;
//啥没干就多了个getter
class Watcher{
    constructor(vm,fn,cb,options){//$watch() 要将dep放到watch中
        this.vm = vm;
        this.fn = fn;
        this.cb = cb;
        this.options = options;
        this.id = id++;
        this.depsId = new Set();
        this.deps = [];
        this.getter = fn;//fn 就是渲染逻辑、
        this.get();//表示上来后就做一次初始化
    }
    addDep(dep){
        let did = dep.id;
        if (!this.depsId.has(did)){
            this.depsId.add(did);
            this.deps.push(dep);//做了保存id的功能 并且让watcher己住dep
            dep.addSub(this);
        }
    }
    get(){
        Dep.target = this; //dep.target = watcher
        this.getter();//页面渲染逻辑 _update(_render) vm.name/vm.age
        Dep.target = null;//渲染完毕后 就将标识清空了 只有在渲染的时候才会进行手机
    }
    update(){//每次更新数据都会同步调用这个update方法 我可以将更新的逻辑缓存起来 等会儿同步更新数据的逻辑执行完毕后 一次调用（去重的逻辑）
        console.log('真正执行次数');
        //缓存watcher
        queueWatcher(this);
        //可以异步更新处理
        //this.get();
    }

    run(){
        console.log('真正执行次数');
        this.get();//render() 取最新的vm上的数据
    }
}

export default Watcher;